Vertical Menu | Blogging Experiment

What’s on your WordPress Menu?

Last week we talked about the WordPress header and header.php. We continue this series and this week we’ll be touching on the WordPress menu. Visitors come to a website to find answers. How they arrive, whether via an organic search, a paid ad, or a sponsored link, matters little to these information seekers. These visitors come believing that they will quickly find the answers that they need. The operative word here being quickly. (The boon and bane of hi-speed internet is that it has turned a lot of us into impatient “speed demons”.) Once these visitors have what they want and they do linger on the site after, then that’s already a bonus.

Often, these new visitors aren’t really looking for a website with flashy, awesome text animation embedded in a huge full width slider-enabled $50 premium WordPress theme. Some might, but like we said, majority of them simply want to find a quick answer to whatever they are looking for. A lot of them will look for the link to the item that led them to the site in the first-place or go straight to the menu to find their way through the site. That’s why it’s important to create a website navigation menu that will make your visitor’s website experience fruitful and pleasant at the same time.

What is website navigation anyway? What is a menu?

Navigation Defined

Navigation Menu is a theme feature introduced with Version 3.0. WordPress includes an easy to use mechanism for introducing customised navigation menus into a theme. In order to incorporate menu support into your theme, you need to add a few code segments to your theme files.
Source: WordPress Codex

There are many navigation methods employed on websites. The simplest and easiest to follow, will allow your visitors to find your information pages and enjoy the visit! Simple HTML navigation menus also provide search engines with a clearly marked road map to follow, when they scan your website.
Source: Cal Poly

The process by which a user explores all the levels of interactivity, moving forward, backward, and through the content and interface screens. Users navigate through the project by clicking on interactive controls such as buttons, image maps, and hypertext, while clues such as special colors, backgrounds, or interface sounds help orient them to where they are at within the levels of interactivity. A good navigation scheme will leave the user with little question about where they are in the document and where they can go from there.
(from Lisa Graham, The Principles of Interactive Design, 1999)

Menu Defined

A list of options displayed to the user by a data processing system, from which the user can select an action to be initiated. In text processing, a list of choices displayed to the user by a text processor from which the user can select an action to be initiated. A list of choices that can be applied to an object. A menu can contain choices that are not available for selection in certain contexts. Those choices are indicated by reduced contrast.
Source: Glasgow Caledonian University

“Good Website navigation is very important to every business website. Good text links help. When a visitor can’t easily discover where they are, what valuable business information is on the page, where to go next and how to find your Home Page or a good sitemap… they leave your website! You would never tell a customer to stand outside your business, while they try to do business with you. Poor website navigation creates the same visitor experience. Good page titles tell visitors what each page is about.

A well designed menu will allow search engine spiders and human visitors to navigate around your website and never get lost. A menu is simply a group of links to more information. Helping your visitors find information quickly, will impress potential customers. Finding good information is the key to a successful business website.”
(Source: SEOWebsitesdesigners.com)

There are several ways to set up your navigation menu system on your website: vertical, horizontal, or a combination of both. Beginning WP version 3.0, WordPress introduced a new navigation menu system and since then after numerous updates and improvements, the WordPress menu management system has made setting up navigation menus in the backend admin panel section more user friendly with lesser and lesser coding or technical knowledge required. Check out these great resources: this article by Justin Tadlock, or these tutorials WordPress menu navigation tutorial and Setting up Menus in WordPress to learn how to set up your menus in no time.

Not Your Usual WordPress Themes Roundup

Multipurpose WordPress Themes are great for creating all types of websites but sometimes it’s more convenient and it saves a lot of time to use a ready-made theme that’s specific to your website requirements. Here are a few WordPress themes that are more than just your usual WordPress theme designs. Check them out:

Joglo – Woocommerce Real Estate Theme

Joglo Premium WordPress Theme is a modern real estate theme especially built for the real estate business. This WooCommerce enabled premium theme makes it easy to run an online realty company that can handle transactions like offering property for sale or home/apartment renting service. It has a sleek and dynamic design packed with features and functions like: Advanced Search where customers can easily browse any property filtered according to price, location, type or some other category or tag; Agents page listing agents names, description, and contact information; Responsive and custom layout; Property page with a contact form; and, Property detail page with map

Advocator: Professional Nonprofit Organizations

Advocator Premium WordPress Theme is primarily designed for non-profit, charity, organization, or advocacy related websites that aim to be interactive with their audience. This theme boasts of professional level accessibility and performance having been built using the Foundation 5 framework by Zurb. Key features include: audience can engage with you on mobile devices with ease, you can accept donations seamlessly, you can add Events for your organization, you can collect emails using Mailchimp, and if you’re a developer, you can customize super fast and efficiently.

Frisieur – WordPress Theme for Hairdressers

Frisieur Premium WordPress Theme is a fully responsive theme designed for hairdressers, hair salons, stylists, makeup artists, and similar professionals you need to set appointments with. This theme includes features and functions like: Working Appointment form, Approximate time with timepicker (compatible with two time types), Opening hours table, Google Map with geolocalization, and Working Contact Form, – elements necessary to booking clients online.

Pump – Responsive Wedding & Multi-purpose Theme

Pump Premium WordPress Theme is a Wedding Event & Multipurpose WordPress Theme all rolled into one. This super simple and yet fully functional responsive theme has endless possibilities not only for Weddings and events but even for business, corporate, or portfolio applications. This theme can grow with its users and convert into something else and adjust as the couple’s needs and interests evolve. It is also WooCommerce, BuddyPress, bbPress, and WPML ready.

WooCommerce Supermarket Theme – GoMarket

Woocommerce GoMarket Premium WordPress is a complete shopping solution for eCommerce owners. This theme includes 6 pre-designed stores making it easy to set up the store of your dreams. It features a
combination of Vertical Menu and Main Mega Menu to help customers navigate through the site easily.

WordPress Themes for Photographers – March 2014

Creating an online portfolio is no longer a challenge nowadays. There are hundreds of options for displaying photographs available to photographers today that give you that expensive professional look. Here are some of the latest WordPress photography themes you can use to show off your prized images:

PhotoReactive – Fullscreen Studio for WordPress

PhotoReactive Premium WordPress Theme is a full screen studio theme for WordPress that photographers will love. This premium theme gives photographers tons of creative options for them to showcase images and other multimedia content both on the homepage and also in the portfolio pages. Full screen slideshows options include touch swipe capability, captions (with or without), photo wall, YouTube and Vimeo videos, static image, and the popular Kenburns slideshow (with or without audio). This theme is also equipped with Ajax & normal portfolio showcases, WooCommerce functionality to help you set up your own photography shop and it is also WPML ready (includes .po .mo language files.)

Devendo Photography WordPress Theme

Devendo Premium WordPress Theme is a flat and modern portfolio theme suitable for photographers. This premium theme is built with Bootstrap 3, is 100% responsive and is also available in four color schemes that can be changed in the theme’s options panel. Key features include: smart overlay search function, integrated social sharing, responsive mega menus with Bootstrap grid inside dropdowns, full screen portfolio with direction aware hover effects, smooth scrolling AJAX-powered horizontal blog, among others.

Fidelity – Premium Photography WordPress Theme

Fidelity Premium WordPress Theme is a modern photography theme with a future-oriented design targeted primarily for photographers but can also be used by design agencies, architecture bureaus, etc. This premium theme takes a full advantage of the latest CSS3 hardware-accelerated transitions (with a fallback to jQuery animations) giving users incredible performance on diverse platforms like desktops, tablet PCs and smartphones. Some of the unique features include: the ability to set up narrow or full width page in a few clicks, the ability to show EXIF data in the portfolio posts, and the horizontal masonry style blog layout that gives you that high end magazine feel. You can also display unlimited slideshows and videos for your background.

The Gentleman – Photography & Portfolio Theme

The Gentleman WordPress Theme is a fully responsive multipurpose theme perfect for any photographer, designer, agency, or any business looking to show off their work. There are multiple homepage layouts, tons of portfolio styles to choose from, and a lot of other features allowing you to build your perfect photography/portfolio website. This theme includes features like: Price tables, team members, multiple blog layouts, preset flat and pattern styles, a powerful theme options panel, multiple sliders including the popular Revolution Slider, multiple portfolio options including the Magnific Responsive Lightbox, and so much more.

Camilla – Horizontal Fullscreen Photography Theme

Camilla Premium WordPress Theme is a modern, minimal, full screen horizontal canvas ideal for displaying your photographs the way you intended them to be seen. This theme’s minimalistic design shifts the focus to your work with the use of distraction-free full screen video-ready galleries . Some of this theme’s modern features include: one-page layout, horizontal scroll, vertical scroll sections in horizontal layout, and it is optimized for mobile devices with its swipe navigation feature for smartphones and tablets, etc.

Useful WordPress Widgets For Your Website

Not sure which widgets to add to your website? Widgets are handy tools or content that make it easy to customize the content of your sidebar(s). You can add, arrange, and remove them from the sidebar(s) of your blog according to your design and function preferences. Here are some useful and popular widgets to beef up the overall functionality of your WordPress theme.

Sidebar and Widget Manager

This powerful widget manager allows you to have full control over your WordPress theme pages, layouts, and content and turn them into widgetized, responsive layouts. With its easy to use grid manager, this tool allows you to drop and drag widgets into any part of the page. You can replace existing sidebars with custom ones, add a sidebar in a page template file, manage vertical and horizontal widget alignment, and so much more. This widget supports other popular widgets such as WooCommerce, WPML, BuddyPress and BBpress. Designed to fit into the core WordPress design, the Sidebar and Widget Manager requires easy administration with minimal fuss.

Taxonomies Filter Widget

Taxonomies Filter Widget is a robust but powerful WordPress plugin that creates a widget which acts as a filter for your categories, tags, taxonomies and numerical custom fields. Visitors will then be able to do faceted searches on your site to filter posts and pages by taxonomies and numerical custom fields, using drop-downs, checkboxes, radio buttons, multi select and range sliders. While built especially for sites with a variety of categories, custom taxonomies and custom posts (eg: shops, directories, tutorials, job boards or listings), this plugin will also do a great job at filtering the WordPress posts and pages by categories, tags and even post format. Search can be done using dropdowns, checkboxes, radio buttons, multi-select and range sliders. Hierarchical navigation is also possible, allowing readers to drill down to specific information.

Twitter Ultimate WordPress Plugin

Twitter Ultimate is a user friendly, highly customizable WordPress plugin you can use to display real time twitter feed based on the search word / username / list entered. You can: display tweets from usernames or tweets mentioning a word, display tweets from multiple queries or usernames, control number of tweets to be shown in the feed, control speed of incoming tweets, embed the widget directly on your pages or posts, etc. This gives you real time, live feedback for a specific post or page.

Hello Ajax Tabs

“Hello ajax tabs” is a WordPress plugin, which can be used for creating tabs element from any widgets you have. This plugin comes with 16 predefined styles and 23 animation effects, ajax support, multi tabs support, easing support, vertical tabs support, menu width and height adjustment controls for vertical tabs, fixed height support, other useful features to ensure you can create the tabs you need.

Dropbox Frontend Slider

The Dropbox Frontend Slider widget allows you to display dropbox images directly on your website. You can display these images either using the flexslider without effects or create your own effects. You can also choose between various frontend image sizes, choose the direct URL from Dropbox where the images are located, add or edit your dropbox images and immediately see the changes coming up on the frontend, etc.

The Optimized WordPress Sidebar

According to the WordPress Code

The sidebar is a narrow vertical column often jam-packed with lots of information about a website. Found on most WordPress sites, the sidebar is usually placed on the right or left-hand side of the web page, though in some cases, a site will feature two sidebars, one on each side of the main content where your posts are found.

Historically, the main purpose of the sidebar has been to provide navigation assistance for the visitor – a function that commonly continues to the present day. These navigation aids are designed to help people move about your site and find the information you want them to see. The list of navigation items includes Categories, Pages, Archives, and even the most recent posts. Another navigational tool you’ll see in the sidebar is a search form to help people find what they are looking for on your site.

The first information in the standard WordPress installation is a list of Pages or Categories. Listing Pages helps the visitor find more information about your site, like About, Contact, Register, or Site Map. The information displayed in the sidebar is controlled by your Theme’s Template sidebar.php file.

Rethinking your Sidebar

Next to the menu navigation, the sidebar is your virtual signpost pointing the way to exactly where you want to direct your traffic. It acts like a target board of links where you deliberately shoot your traffic towards. That’s why you need to give careful thought to what goes into your sidebar. Every link should be strategic…optimized. Populating the sidebar with useless links that have no value to your users nor to your ranking is a waste of virtual real estate.

Left? Right? Nowhere in sight?

Tired of the left-right sidebar configuration/ Did you know that you can add sidebars to your theme other than the usual left-right configuration? You can actually put additional sidebar in a header, a footer, or any other area in your template. Additional sidebars let you place any WordPress Widget (such as Recent Posts, Pages, Links/Blogroll, Calendar, Tag Cloud, as well as any custom widgets) into new areas of your WordPress template. Check out this handy tutorial by Michael David to see how it’s done. Some content-rich sites have totally junked the sidebars or strategically relocated them as part of their branding. Whatever you decide to do with your sidebar, displayed or hidden, should be towards the goal of enhancing your user’s experience on your site while enhancing your site’s overall performance.

WordPress Theme Deconstructed

Last week we touched on the basic components of a typical WordPress theme. Below is a visual example of how the layout looks like.

The components are as follows:

The Header (header.php)

The header is the structure that traditionally sits at the top of a web page. It contains the title of the website. It may also be referred to as the masthead, head, title, and banner. In all WordPress Themes, the header is found within the header.php template file.

Most themes have a header image that displays at the top of the page. This image is generated by a graphic defined either in the CSS value for the property that represents the header area or through the use of a custom header feature in WordPress. In themes that don’t have the custom header image feature, you can easily define a background image for the header image using CSS. (source: CSS for Dummies)

Menu (navigation) – usually found within or above the header

There are two ways to display a nav menu. One is by calling wp_nav_menu() within a theme template file. The other is by using the Navigation Menu widget. Most themes will call a menu from their header.php template, but menus can be placed anywhere. (source: Justin Tadlock)

The Sidebar (sidebar.php)

In general, the WordPress sidebar features titles of the various sections within a list, with the section items in a nested list below the title.
According to the WordPress Codex and in terms of design,
a sidebar is:
“… a narrow vertical column often jam-packed with lots of information about a website. Found on most WordPress sites, the sidebar is usually placed on the right or left-hand side of the web page, though in some cases, a site will feature two sidebars, one on each side of the main content where your posts are found.”

(You can also check out our previous article “Adding Sidebars to WordPress” to read more about sidebars.)

The Content Column (index.php)

The content container in WordPress plays the most important role. It holds the WordPress Loop which dictates the generation of content on the page depending upon the request by the user.

Content consists of text, images, or other information shared in posts. This is separate from the structural design of a web site, which provides a framework into which the content is inserted, and the presentation of a site, which involves graphic design.

The Footer (footer.php)

The footer is found within the footer.php template file. Footers are more than just a place to put copyright information. The footer in a web design is the bottom of the page. It indicates the end of the page. The footer includes navigational links to move the reader into your blog’s content, but it does so much more. It’s the last thing some visitors see after they finish reading your blog post and comments and should encourage people to stay a little longer on your site. (Source: lorelle.wordpress.com).

More next week!